<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules"
      class="max-h-500px overflow-y-scroll">
      <el-container v-for="(form,index) in formData.vehicleDriverList" :key="index"
        class="!grid grid-cols-[3fr,3fr,4fr,4fr,1fr]">
        <el-form-item label="车牌号" :prop="`vehicleDriverList.${index}.vehicleNo`" :rules="formRules.vehicleNo"
          label-width="100">
          <el-input v-model="form.vehicleNo" :maxlength="8" placeholder="请输入车牌号" class="!w-full" />
        </el-form-item>
        <el-form-item label="司机姓名" :prop="`vehicleDriverList.${index}.driverName`" :rules="formRules.driverName"
          label-width="100">
          <el-input v-model="form.driverName" :maxlength="20" placeholder="请输入司机姓名" class="!w-full" />
        </el-form-item>
        <el-form-item label="司机手机号" :prop="`vehicleDriverList.${index}.driverPhone`" :rules="formRules.driverPhone"
          label-width="130">
          <el-input v-model="form.driverPhone" :maxlength="11" placeholder="请输入司机手机号" class="!w-full" />
        </el-form-item>
        <el-form-item label="备注" label-width="80">
          <el-input v-model="form.remark" :maxlength="100" placeholder="请输入备注" class="!w-full" />
        </el-form-item>
        <el-icon :size="20" class="ml-10px mt-5px cursor-pointer" @click="deleteItem(index)">
          <Delete />
        </el-icon>
      </el-container>
      <el-button class="custom-button" type="primary" plain @click="addVehicle()">
        <Icon icon="ep:plus" class="mr-5px" />新增
      </el-button>
      <div class="flex items-center mt-20px" style="color: #F78600;">
        <el-icon :size="20" color="#F78600" class="mr-6px">
          <WarningFilled />
        </el-icon>
        车牌+手机号信息重复会覆盖历史信息
      </div>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitForm">确认提交</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
  import { getTenantId } from '@/utils/auth'
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import * as lineManageApi from '@/api/transportation/lineManage'

  const dialogTitle = ref()
  const emit = defineEmits(['success'])
  const dialogVisible = ref(false)
  const formLoading = ref(false)
  const message = useMessage()
  const formRef = ref()
  const formData = ref({
    routId: undefined,
    vehicleDriverList: [{
      vehicleNo: undefined,
      driverName: undefined,
      driverPhone: undefined,
      remark: undefined
    }]
  })

  const validateVehicleNo = (rule, value, callback) => {
    if (!value || value.length < 7) {
      callback(new Error('请输入7-8位的车牌号'))
      return
    }
    callback()
  }

  const validatePhone = (rule, value, callback) => {
    if (!/^\d{8,11}$/.test(value)) {
      callback(new Error('请输入8-11位司机手机号'))
      return
    }
    callback()
  }

  const formRules = reactive({
    vehicleNo: [{ required: true, message: '请输入7-8位的车牌号', trigger: 'blur' },
    { validator: validateVehicleNo, trigger: 'blur' }],
    driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
    driverPhone: [{ required: true, message: '请输入8-11位司机手机号', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }]
  })

  const addVehicle = () => {
    if (formData.value.vehicleDriverList.length >= 20) {
      message.warning('最多20条数据')
      return
    }
    formData.value.vehicleDriverList.push({
      vehicleNo: undefined,
      driverName: undefined,
      driverPhone: undefined,
      remark: undefined
    })
  }

  const deleteItem = (index) => {
    if (formData.value.vehicleDriverList.length === 1) {
      message.warning('至少保留一条数据')
      return
    }
    formData.value.vehicleDriverList.splice(index, 1)
  }

  const submitForm = async () => {
    const valid = await formRef.value.validate()
    if (!valid) return
    try {
      formLoading.value = true
      await lineManageApi.bindVehicles(formData.value)
      message.success('操作成功')
      dialogVisible.value = false
      emit('success')
    } finally {
      formLoading.value = false
    }
  }

  const open = async (row) => {
    resetForm()
    dialogTitle.value = row.routeName
    formData.value.routId = row.id
    dialogVisible.value = true
  }

  const resetForm = () => {
    formData.value = {
      routId: undefined,
      vehicleDriverList: [{
        vehicleNum: undefined,
        driverName: undefined,
        phoneNum: undefined,
        remark: undefined
      }]
    }
    formRef.value?.resetFields()
  }

  defineExpose({ open })
</script>
<style lang="scss" scoped>
  :deep(.custom-button.el-button--primary.is-plain) {
    background-color: #ffffff !important;
  }

  :deep(.custom-button.el-button:focus),
  :deep(.custom-button.el-button:hover) {
    color: var(--el-color-primary) !important;
  }
</style>